<script setup>
import { onMounted, ref } from 'vue'
import { invoke } from '@tauri-apps/api/core'
import { emit, listen } from '@tauri-apps/api/event'

const greetMsg = ref('')
const name = ref('')

async function greet() {
  // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
  greetMsg.value = await invoke('greet', { name: name.value })
}

async function greet_event() {
  greetMsg.value = await invoke('greet_event', { name: name.value })
}
async function listen_to_greet() {
  // console.log(unlisten )
  const unlisten = await listen('greet_event', (event) => {
    console.log(event.payload)
    greetMsg.value = event.payload
    console.log(greetMsg.value)
  })
}

onMounted(  () => {
    listen_to_greet()
})
</script>
<template>
  <div class="card">
    <form class="row" @submit.prevent="greet">
      <input id="greet-input" v-model="name" placeholder="Enter a name..." />
      <button type="submit">Greet</button>
    </form>
    <button type="button" @click="greet_event()">Event Greet</button>
    <p>{{ greetMsg }}</p>
  </div>
</template>
